<template>
  <div class="search-bar">
    <a-form ref="formRef" :model="formData">
      <div class="grid-container">
        <a-form-item v-for="field in props.fieldsConfig" :key="field.field" :label="field.label" :field="field.field"
          class="grid-item" label-col-flex="60px" :style="getGridColumnStyle(field)">
          <component :is="matchRender(field.type)"
            v-bind="field.optionsConfig ? { options: field.optionsConfig.options } : {}"
            v-model="formData[field.field]"
            :multiple="field.type === 'multiSelect'"
            @update:value="handleFieldChange(field.field, $event)"
            :max-tag-count="1" allow-clear />
        </a-form-item>
        <a-form-item class="grid-item">
          <slot name="buttons"></slot>
        </a-form-item>
      </div>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, reactive, watchEffect, defineExpose, defineEmits } from 'vue'
import type { SearchFieldConfig } from '@/models/BaseModels'
import Input from '@arco-design/web-vue/es/input'
import InputNumber from '@arco-design/web-vue/es/input-number'
import Select from '@arco-design/web-vue/es/select'
import DatePicker from '@arco-design/web-vue/es/date-picker'
import RangePicker from '@arco-design/web-vue/es/date-picker/range-picker'
import type { FormInstance } from 'ant-design-vue'
import RangeSelect from './RangeSelect.vue'

const props = defineProps<{
  fieldsConfig: SearchFieldConfig[]
}>()

const emit = defineEmits(['update:modelValue'])

const formData = reactive<Record<string, any>>({})

// **初始化表单字段**
watchEffect(() => {
  props.fieldsConfig.forEach(item => {
    if (!(item.field in formData)) {
      formData[item.field] = item.type === 'multiSelect' ? [] : null
    }
  })
  emit('update:modelValue', { ...formData })
})

// **处理字段值变化**
const handleFieldChange = (field: string, value: any) => {
  formData[field] = value
  emit('update:modelValue', { ...formData })
}

// **匹配组件**
const matchRender = (type: string) => {
  switch (type) {
    case 'input': return Input
    case 'inputNumber': return InputNumber
    case 'select': return Select
    case 'multiSelect': return Select
    case 'date': return DatePicker
    case 'dateTimeRange': return RangePicker
    case 'numberRange': return RangeSelect
    default: return Input
  }
}

// **重置表单**
const formRef = ref<FormInstance | null>(null)
const resetFields = () => {
  Object.keys(formData).forEach(key => {
    formData[key] = props.fieldsConfig.find(f => f.field === key)?.type === 'multiSelect' ? [] : null
  })
  emit('update:modelValue', { ...formData })
}

const getGridColumnStyle = (field: SearchFieldConfig) => {
  const expandField = ['dateTimeRange', 'numberRange'];
  return expandField.includes(field.type) ? { gridColumn: 'span 2' } : {};
}

defineExpose({ resetFields })
</script>
<style scoped>
.grid-container {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.grid-item {
  width: 100%;
}
</style>
